<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>登录</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <!-- jquery -->
    <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
    <!-- bootstrap -->
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/bootstrap.min.css}" />
    <script type="text/javascript" th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
    <!-- jquery-validator -->
    <script type="text/javascript" th:src="@{/jquery-validation/jquery.validate.min.js}"></script>
    <script type="text/javascript" th:src="@{/jquery-validation/localization/messages_zh.min.js}"></script>
    <!-- layer -->
    <script type="text/javascript" th:src="@{/layer/layer.js}"></script>
    <!-- md5.js -->
    <script type="text/javascript" th:src="@{/js/md5.min.js}"></script>
    <!-- common.js -->
    <script type="text/javascript" th:src="@{/js/common.js}"></script>
    <link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
<form name="loginForm" id="loginForm" method="post" style="width: 50%;margin: 0 auto">
    <h2 style="text-align:center; margin-bottom: 20px">用户登录</h2>

    <div class="form-group">
        <div class="row">
            <label class="form-label col-md-4">请输入手机号码</label>
            <div class="col-md-5">
                <input id="mobile" name = "mobile" class="form-control" type="text" placeholder="手机号码" required="true"  minlength="11" maxlength="11" />
            </div>
            <div class="col-md-1">
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="row">
            <label class="form-label col-md-4">请输入密码</label>
            <div class="col-md-5">
                <input id="password" name="password" class="form-control" type="password"  placeholder="密码" required="true" minlength="6" maxlength="16" />
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-3">
            <button class="btn btn-primary btn-block" type="reset" onclick="reset()">重置</button>
        </div>
        <div class="col-md-3">
            <button class="btn btn-primary btn-block" type="submit" onclick="login()">登录</button>
        </div>
        <div class="col-md-3">
            <button class="btn btn-primary btn-block" type="button" onclick="register()">注册</button>
        </div>
    </div>
</form>
</body>
<script>


        function login() {
            $("#loginForm").validate({
                submitHandler:function (form) {
                    doLogin();
                }
            });
        }
        function doLogin() {
            g_showLoading();
            var inputPass=$("#password").val();
            var salt=g_passsword_salt;
            var str=""+salt.charAt(0)+salt.charAt(3)+inputPass+salt.charAt(6)+salt.charAt(7);
            var password=md5(str);
            $.ajax({
                url:"/login/do_login",
                type:"POST",
                data:{
                    mobile:$("#mobile").val(),
                    password:password
                },
                success:function(data){
                    if(data.code==0){
                        layer.msg("成功");
                        //登陆成功之后跳转到商品列表页面
                        window.location.href="/goods/to_list"
                    }else {
                        layer.msg(data.msg)
                    }
                },
                error:function () {
                    layer.closeAll();
                }
            })
        }
        function register() {
            $.get('../user/form.html',function (html) {
                var index=layer.open({
                    type:1
                    ,title: '注册信息'
                    ,area:'auto'
                    ,content:html
                    ,btn:["注册","取消"]
                    ,yes:function () {
                        var phone=$("#userName").val();
                        var password=$("#passWord").val();
                        if(!phone){
                            layer.msg('手机号不能为空')
                            return;
                        }
                        if(phone.length!=11){
                            layer.msg('手机号不合法')
                            return;
                        }
                        if(!password){
                            layer.msg('密码不能为空')
                            return;
                        }

                        if(password.length<6){
                            layer.msg('密码至少6位')
                            return;
                        }
                        if(password.length>12){
                            layer.msg('密码不能超过12位')
                            return;
                        }
                        var salt=g_passsword_salt;
                        var str=""+salt.charAt(0)+salt.charAt(3)+password+salt.charAt(6)+salt.charAt(7);
                        $.post('/user/userAddOrUpdate',{phone:phone,passWord:md5(str)},function(data){
                            if(data.code>0){
                                layer.msg(data.msg);
                                return;
                            }
                            layer.msg('注册成功');
                            layer.close(index);
                        })
                    }
                    ,btn2:function () {
                        layer.close(index);
                    }
                })
            })
        }
</script>
</html>